import { WifiOutlined, PrinterOutlined, CameraOutlined } from '@ant-design/icons';

interface StatusBarProps {
  networkStatus: boolean;
  printerStatus: boolean;
  cameraStatus: boolean;
}

export const StatusBar = ({ networkStatus, printerStatus, cameraStatus }: StatusBarProps) => {
  return (
    <div className="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-xl border-b border-gray-200/50 z-50 shadow-sm">
      <div className="px-3 py-2 flex items-center justify-between">
        <h1 className="text-lg font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
          作品集-大头贴
        </h1>
        <div className="flex items-center space-x-2">
          <div className="flex items-center space-x-1 bg-white/50 px-2 py-0.5 rounded-full shadow-sm">
            <WifiOutlined className={`text-sm ${networkStatus ? "text-green-500" : "text-red-500"}`} />
            <span className="text-[10px] font-medium text-gray-700">{networkStatus ? "网络正常" : "网络断开"}</span>
          </div>
          <div className="flex items-center space-x-1 bg-white/50 px-2 py-0.5 rounded-full shadow-sm">
            <PrinterOutlined className={`text-sm ${printerStatus ? "text-green-500" : "text-red-500"}`} />
            <span className="text-[10px] font-medium text-gray-700">{printerStatus ? "已连接" : "未连接"}</span>
          </div>
          <div className="flex items-center space-x-1 bg-white/50 px-2 py-0.5 rounded-full shadow-sm">
            <CameraOutlined className={`text-sm ${cameraStatus ? "text-green-500" : "text-red-500"}`} />
            <span className="text-[10px] font-medium text-gray-700">{cameraStatus ? "正常" : "未就绪"}</span>
          </div>
        </div>
      </div>
    </div>
  );
}; 